<template>
  <div :class="wrapperClass" v-if="auth === 'edit'">
    <el-tree-select
      style="width: 100%"
      v-model="model" clearable
      :data="departTree" default-expand-all
      check-strictly node-key="id"
      :props="defaultProps"
      @change="departChange"
      :render-after-expand="false"
    />
  </div>


  <!--  <el-input v-if="auth === 'edit'" v-model="model" :class="wrapperClass"-->
  <!--            :placeholder="placeholder" @blur="fieldValueChange"/>-->

  <el-input v-else-if="auth === 'browse'" v-model="historyTitle" disabled
            @blur="fieldValueChange"/>

  <el-input v-else-if="auth === 'hide'" v-model="historyTitle" disabled
            type="password"/>

  <el-text truncated v-else-if="auth === 'static'">
    {{ historyTitle }}
  </el-text>
</template>
<script setup>
import {computed, defineProps, onMounted, ref, shallowRef, unref} from 'vue';
import {DefaultFieldDefinition} from '@/components/form/DefaultFormDefinition';
import {isEmpty, listToTrees, real, treesForeach} from '@/utils/CommonUtils';
import './textInput.css';
import {getAction} from '@/request/BaseRequest';

const defaultProps = {
  children: 'children',
  label: 'unitName',
};
const props = defineProps({
  auth: {
    type: String,
    default: 'static'
  },
  notNull: {
    type: String,
    default: '0' //0表示非必填, 1表示必填
  },
  field: {
    type: Object,
    default() {
      return DefaultFieldDefinition;
    }
  }
});
const departTree = shallowRef([]);
const model = ref();
const historyTitle = shallowRef();
const emits = defineEmits(['fieldValueChange']);
onMounted(() => {
  loadDictOptions();
});

function loadDictOptions() {
  getAction('/sys/unit/loadDepatrsByCurrentUser').then(data => {
    if (data.success) {
      let result = data.result;
      setDepartOptions(result);
    }
  });
}

function setDepartOptions(result) {
  if (isEmpty(result)) result = [];
  result.forEach(d => {
    if (d.type + '' === '0') {
      d.disabled = true;
    } else {
      d.disabled = false;
    }
  });
  departTree.value = listToTrees(result);
}

function getDepartTree() {
  let res = real(departTree);
  if (isEmpty(res)) return [];
  return res;
}

function departChange() {
  let value = model.value;
  if (isEmpty(value)) {
    historyTitle.value = undefined;
    return;
  }
  treesForeach(getDepartTree(), node => {
    node = real(node);
    if (node.id === model.value) {
      historyTitle.value = node.unitName;
    }
  });
}

function getFieldValue(rowData) {
  rowData[`${real(props.field).tableFieldName}_dictText`] = historyTitle.value;
  return unref(model);
}

function resetField() {
  model.value = undefined;
}

function setFieldValue(value, obj) {
  if (isEmpty(value)) {
    model.value = undefined;
    historyTitle.value = undefined;
    return;
  }
  model.value = value;
  try {
    historyTitle.value = obj[`${real(props.field).tableFieldName}_dictText`];
  } catch (e) {
  }
}

function fieldValueChange() {
  emits('fieldValueChange', props.field);
}

function getFieldValueText() {
  return historyTitle.value;
}

function getFieldValueWithCheck(rowData) {
  if (props.notNull + '' === '1' && isEmpty(model.value)) {
    throw new Error('请将必填项填写完整');
  }
  return model.value;
}

const placeholder = computed(() => {
  if (isEmpty(props.field.id)) return '';
  return `请选择${props.field.alias ? props.field.alias : props.field.showName}`;
});

const wrapperClass = computed(() => {
  return {
    notNull: props.notNull === '1' && isEmpty(model.value)
  };
});

defineExpose({
  getFieldValue,
  setFieldValue,
  resetField,
  getFieldValueText,
  getFieldValueWithCheck,
});
</script>
